<template>
  <div class="commDig time-area">
    <div class="title2 ">
      <ul class="tit-mode">
        <li :class="isDownTime == true ? 'activeLeft' : ''" @click="change()">倒计时</li>
        <li :class="isDownTime == false ? 'activeRight' : ''" @click="change()">正计时</li>
      </ul>
      <span class="closed" @click="$emit('colosCountDown')"><img src="static/img/icon-close.png" /></span>
    </div>
    <div class="count-box">
      <div class="count-tip-box count-top">
        <div class="tip-item" @click="addMinute(10)"><img src="../../static/img/arrow-dd.png" /></div>
        <div class="tip-item" @click="addMinute(1)"><img src="../../static/img/arrow-dd.png" /></div>
        <div class="tip-jg"></div>
        <div class="tip-item" @click="addSeconds(10)"><img src="../../static/img/arrow-dd.png" /></div>
        <div class="tip-item" @click="addSeconds(1)"><img src="../../static/img/arrow-dd.png" /></div>
      </div>
      <p class="count-time-box">
        <span>{{ msTime.minutes }}</span>
        <span>:</span>
        <span>{{ msTime.seconds }}</span>
      </p>
      <div class="count-tip-box count-bottom">
        <div class="tip-item" @click="reduceMinute(10)"><img src="../../static/img/arrow-dd.png" /></div>
        <div class="tip-item" @click="reduceMinute(1)"><img src="../../static/img/arrow-dd.png" /></div>
        <div class="tip-jg"></div>
        <div class="tip-item" @click="reduceSeconds(10)"><img src="../../static/img/arrow-dd.png" /></div>
        <div class="tip-item" @click="reduceSeconds(1)"><img src="../../static/img/arrow-dd.png" /></div>
      </div>
    </div>

    <div class="mt30 baseAct width100">
      <button @click="stopCount()" class="sure" v-if="isStop==true">停止计时</button>
      <button @click="beginCount()" class="sure"  v-else>开始计时</button>
    </div>
  </div>
</template>
<script>
export default {
  replace: true,
  data() {
    return {
      flag: 0,
      isDownTime: true, //是倒计时
      msTime: {
        minutes: '00', //分钟
        seconds: '00' //秒
      },
      intervalTime: '',
      isStop:false
    };
  },
  mounted() {},
  destroyed() {
    clearInterval(this.intervalTime);
    this.intervalTime = '';
  },
  methods: {
    // 开始计时
    beginCount() {
      //console.log('begin');
      // 倒计时
      // clearInterval(this.intervalTime);
      if (this.isDownTime) {
        //console.log()
        //console.log('倒计时');
        //console.log(this.flag);
        if (parseInt(this.msTime.minutes) +parseInt(this.msTime.seconds)==0 ) {
          this.$message('请先选择计时时间');
          return;
        }
        this.isStop=true
        if (this.flag == 0) {
          this.intervalTime = setInterval(() => {
            this.flag = 1;
            if (Number(this.msTime.seconds) > 0) {
              this.msTime.seconds = Number(this.msTime.seconds) - 1;
            } else if (Number(this.msTime.minutes) > 0) {
              this.msTime.minutes = Number(this.msTime.minutes) - 1;
              this.msTime.seconds = Number(this.msTime.seconds) + 60 - 1;
            } else {
              //console.log('清楚倒计时');
              //console.log(this.flag);
              clearInterval(this.intervalTime);
              this.intervalTime = '';
              this.flag = 0;
              //console.log(this.flag);
            }

            if (Number(this.msTime.seconds) < 10) {
              this.msTime.seconds = '0' + Number(this.msTime.seconds);
            }
            if (Number(this.msTime.minutes) < 10) {
              this.msTime.minutes = '0' + Number(this.msTime.minutes);
            }
            //console.log(222);
            //console.log(this.flag);
          }, 1000);
        }
      }
      // 正计时
      else {
        this.isStop=true
        //console.log('正计时');
        // // clearInterval(this.intervalTime);
        if(this.flag==0){
          // let overTime = this.msTime;
           // this.msTime = {
           //   minutes: '00', //分钟
           //   seconds: '00' //秒
           // };
           this.intervalTime = setInterval(() => {
             this.flag=1
             this.msTime.seconds = Number(this.msTime.seconds) + 1;
             if (this.msTime.seconds > 59) {
               this.msTime.minutes++;
               this.msTime.seconds = '00';
             }
             if (Number(this.msTime.seconds) < 10) {
               this.msTime.seconds = '0' + Number(this.msTime.seconds);
             }
             if (Number(this.msTime.minutes) < 10) {
               this.msTime.minutes = '0' + Number(this.msTime.minutes);
             }
           }, 1000);
        }

      }
    },
    // 停止计时
    stopCount() {
      this.isStop=false
      clearInterval(this.intervalTime);
      this.intervalTime = '';
      this.flag = 0;
    },
    addMinute(num) {
      //console.log('this.intervalTime:', this.intervalTime);
      if (this.intervalTime) {
        this.$message('计时过程中不能进行修改');
        return;
      }
      if ((num == 10 && Number(this.msTime.minutes) < 90) || (num == 1 && Number(this.msTime.minutes) < 99)) {
        this.msTime.minutes = Number(this.msTime.minutes) + num;
      }
      if (Number(this.msTime.seconds) < 10) {
        this.msTime.seconds = '0' + Number(this.msTime.seconds);
      }
      if (Number(this.msTime.minutes) < 10) {
        this.msTime.minutes = '0' + Number(this.msTime.minutes);
      }
    },
    addSeconds(num) {
      //console.log('this.intervalTime:', this.intervalTime);
      if (this.intervalTime) {
        this.$message('计时过程中不能进行修改');
        return;
      }
      if ((num == 10 && Number(this.msTime.seconds) < 50) || (num == 1 && Number(this.msTime.seconds) < 59)) {
        this.msTime.seconds = Number(this.msTime.seconds) + num;
      }
      if (Number(this.msTime.seconds) < 10) {
        this.msTime.seconds = '0' + Number(this.msTime.seconds);
      }
      if (Number(this.msTime.minutes) < 10) {
        this.msTime.minutes = '0' + Number(this.msTime.minutes);
      }
    },
    reduceMinute(num) {
      //console.log('this.intervalTime:', this.intervalTime);
      if (this.intervalTime) {
        this.$message('计时过程中不能进行修改');
        return;
      }
      if ((num == 10 && Number(this.msTime.minutes) > 9) || (num == 1 && Number(this.msTime.minutes) > 0)) {
        this.msTime.minutes = Number(this.msTime.minutes) - num;
      }
      if (Number(this.msTime.seconds) < 10) {
        this.msTime.seconds = '0' + Number(this.msTime.seconds);
      }
      if (Number(this.msTime.minutes) < 10) {
        this.msTime.minutes = '0' + Number(this.msTime.minutes);
      }
    },
    reduceSeconds(num) {
      //console.log('this.intervalTime:', this.intervalTime);
      if (this.intervalTime) {
        this.$message('计时过程中不能进行修改');
        return;
      }
      if ((num == 10 && Number(this.msTime.seconds) > 9) || (num == 1 && Number(this.msTime.seconds) > 0)) {
        this.msTime.seconds = Number(this.msTime.seconds) - num;
      }
      if (Number(this.msTime.seconds) < 10) {
        this.msTime.seconds = '0' + Number(this.msTime.seconds);
      }
      if (Number(this.msTime.minutes) < 10) {
        this.msTime.minutes = '0' + Number(this.msTime.minutes);
      }
    },
    change() {
      //console.log('change');
      
      this.isDownTime = !this.isDownTime;
      this.isStop=false
      clearInterval(this.intervalTime);
      this.intervalTime = '';
      this.flag=0
      this.msTime={
        minutes: '00', //分钟
        seconds: '00' //秒
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.count-box {
  padding: 30px 0;
}
.count-time-box {
  text-align: center;
  span {
    font-size: 120px;
  }
}
.count-tip-box {
  display: flex;
  padding: 30px 80px;
  .tip-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
    img {
      width: 26px;
    }
  }
  .tip-jg {
    width: 30px;
  }
  &.count-top {
    .tip-item {
      img {
        transform: rotate(180deg);
      }
    }
  }
  &.count-bottom {
  }
}
// 倒计时
.tit-mode {
  li {
    cursor: pointer;
  }
  li.activeLeft {
    color: #ffffff;
    background: #55e4c2;
    height: 37px;

  }
  li.activeRight {
    color: #ffffff;
    background: #55e4c2;
    border-radius: 0 8px 8px 0;
    height: 37px;
  }
}
.baseAct {
  .cancel {
    width: 120px !important;
  }
}
</style>
